<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>效果</title>
		<style type="text/css">
			*{
				margin: 0%;
				padding: 0%;
			}
			.box{
				position:absolute;
				left:50%;
				top:50%;
				
				transform: translate(-50%,-50%);
				width: 400px;
				height: 400px;
				background-color: aquamarine;
				transition: all 3s linear ;
				transform: :scale(45deg);
				
				
				
				
			}
			.box:hover{
				width: 1000px;
				height: 400px;
				background-color: aqua;
				transform: translate(100px,200px);
				/* transform: 转换
				1.位移translate(x轴方向,y轴方向)/transkatex(x)/transkatey(y)
				位移的值可以是百分比,对应自身的百分比;
				 2.缩放scale()倍数*/
				/* transfurm: translatey(-100px); */
				transform:skew(1145deg,1419deg);
			}
			
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
